<template>
  <!-- <q-dialog  v-model="registerDialogVisible">
    <QRAliasForm :mode="'create'" @update="init"></QRAliasForm>
  </q-dialog> -->

  <q-dialog  v-model="editDialogVisible">
    <MaintenanceRecordPage :id="editedRow.id" @update="init"></MaintenanceRecordPage>
  </q-dialog>
  
  <div class="q-pa-sm report-style" style="margin-bottom: 2rem;">
    <div class="q-gutter-y-md">
      <q-table
        class="card-radius "
        flat
        wrap-cells
        bordered
        :pagination="{ rowsPerPage: 100 }"
        :rows-per-page-options="[30, 50, 100, 150, 200 ]"
        :columns="columns"
        :rows="filterRows"
        row-key="id"
        no-data-label="No asset found."
        no-results-label="The filter didn't uncover any results"
       
      >
        <template v-slot:top>
          <div class="row justify-between" style="width: 100%">
            <div class="fal page-header">Trainborne Maintenance Records</div>
            <!-- <div>
              <q-card-actions>
                <q-btn
                  label="create"
                  class="default-btn"
                  @click="openRegisterDialog()"
                />
              </q-card-actions>
            </div> -->
            <!-- <div class="col-6">
          <q-pagination
            class="justify-end"
            v-model="currentPage"
            color="primary"
            :max="max"
            :max-pages="6"
            boundary-numbers
          />
          <div class="text-right q-pa-sm" style="font-size: 1rem">
            <i>Total Records found: {{ total }} </i> 
          </div>
        </div> -->
          </div>
        </template>
        <template v-slot:top-row="props">
          <ColsFilter :filter="props.cols" ref="colsFilter"></ColsFilter>
        </template>


        <!-- <template v-slot:top-right="scope">
            <q-pagination
            style="margin-right: 5px;"
              v-model="currentPage"
              color="primary"
              :max="max"
              :max-pages="6"
              boundary-numbers
              activeDesign="unelevated"
              activeColor="purple"
            />

            <div style="display: flex; align-items: center; gap: 4px">
              <div style="display: flex; align-items: center; gap: 4px">
                <div>每页的行数:</div>
                <div>
                  <q-select
                    dense
                    options-dense
                    borderless
                    optionsCover
                    v-model="scope.pagination.rowsPerPage"
                    :options="[5, 10, 20, 50, 100]"
                    @update:model-value="onchange"
                  />
                </div>
                {{
                  scope.pagination.rowsPerPage * currentPage -
                  scope.pagination.rowsPerPage +
                  1 +
                  " - " +
                  (
                    scope.pagination.rowsPerPage * currentPage <=
                    total
                    ? 
                    scope.pagination.rowsPerPage * currentPage
                    : filterRows.length
                    ) +
                  " of " +
                  total
                }}
              </div>
            </div>
          </template> -->

        <template v-slot:no-data="{ icon, message }">
          <div class="full-width row flex-center text-accent q-gutter-sm">
            <!-- <q-icon size="2em" name="sentiment_dissatisfied" /> -->
            <q-icon size="2em" :name="icon" />
            <span> {{ message }} </span>
          </div>
        </template>
      </q-table>
    </div>
  </div>


</template>

<script setup lang="ts">
import { Loading, useQuasar } from 'quasar';
import {  AssetRelation } from 'src/services/type';
import { computed, ref, watch } from 'vue';

import ColsFilter from 'src/components/table/ColsFilter.vue';
import { list } from 'src/services/maintenaceRecordService';
import MaintenanceRecordPage from './MaintenanceRecordPage.vue';

import {OldMainRecordI} from 'src/services/type'

const $q = useQuasar()

const editedRow = ref();
const editDialogVisible = ref(false);
const deleteDialogVisible = ref(false);
const registerDialogVisible = ref(false);

const colsFilter = ref<typeof ColsFilter>();


// pagination
const currentPage = ref(1);
const rowsPerPage = ref(100);
const sortCol = ref(null);
const total = ref(0);
const max = ref(10);
const sortDirection = ref('desc');

const align = 'left';

const columns = [
  /* {
    name: 'id',
    label: '#',
    field: 'id',
    sortable: true,
    search: false,
    align,
  }, */
  {
    name: 'report_date',
    label: 'Report Date',
    field: 'report_date',
    search: true,
    sortable: true,
    align,
  },
  {
    name: 'receive_date',
    label: 'Receive Date',
    field: 'receive_date',
    search: true,
    sortable: true,
    align,
  },
  {
    name: 'equipment',
    label: 'Equipment',
    field: 'equipment',
    search: true,
    sortable: true,
    align,
  },
  {
    name: 'stock_code',
    label: 'Stock Code',
    field: 'stock_code',
    search: true,
    sortable: true,
    align,
  },
  {
    name: 'serial_no',
    label: 'Serial No',
    field: 'serial_no',
    search: true,
    sortable: true,
    align,
  },
  {
    name: 'location',
    label: 'Location',
    field: 'location',
    search: false,
    align,
  },
  {
    name: 'delay_a',
    label: 'Delay a',
    field: 'delay_a',
    search: false,
    align,
  },
  {
    name: 'delay_i',
    label: 'Delay i',
    field: 'delay_i',
    search: false,
    align,
  },
  {
    name: 'mtce_type',
    label: 'Mtce Type',
    field: 'mtce_type',
    search: false,
    align,
  },
  {
    name: 'line',
    label: 'Line',
    field: 'line',
    search: false,
    align,
  },
  {
    name: 'line_work_order',
    label: 'Line Work Order',
    field: 'line_work_order',
    search: false,
    align,
  },
  {
    name: 'work_order_no',
    label: 'Work Order No',
    field: 'work_order_no',
    search: false,
    align,
  },
  {
    name: 'symptom',
    label: 'Symptom',
    field: 'symptom',
    search: false,
    align,
  },
  {
    name: 'finding',
    label: 'Finding',
    field: 'finding',
    search: false,
    align,
  },
  {
    name: 'test_result',
    label: 'Test Result',
    field: 'test_result',
    search: false,
    align,
  },
  {
    name: 'action',
    label: 'Action',
    field: 'action',
    search: false,
    align,
  },
  {
    name: 'eams_completed_date',
    label: 'Eams Completed Date',
    field: 'eams_completed_date',
    search: false,
    align,
  },
  {
    name: 'out_date',
    label: 'Out Date',
    field: 'out_date',
    search: false,
    align,
  },
  {
    name: 'send_to',
    label: 'Send To',
    field: 'send_to',
    search: false,
    align,
  },
];

const rows = ref<OldMainRecordI[]>([]);

async function init() {
  Loading.show()
  const res = await list(currentPage.value, rowsPerPage.value);
  if (res) {
    Loading.hide()

    console.log(res);
    
    rows.value = res;
    // total.value = res.count;
    // max.value = Math.ceil(res.count / rowsPerPage.value);


  }
  editDialogVisible.value = false;
  deleteDialogVisible.value = false;
  registerDialogVisible.value = false;
}

const filterRows = computed(() => {
  return rows.value?.filter(filterFn);
});

function filterFn(row: AssetRelation) {
  if (colsFilter.value) {
    return colsFilter.value.filterFn(row);
  }
}

watch(currentPage, () => {
  init();
});


init();
</script>

<style scoped>
.content {
  display: flex;
  justify-content: space-between;
  background-color: #eef4fa;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 10px;
}

.warning {
  color: red;
  font-weight: bold;
  text-align: center;
  width: -webkit-fill-available;
  padding-top: 20px;
}

th,
td {
  text-align: left;
  padding: 10px;
}

.row-bg {
  background-color: #d9d9d9;
}

.row-bg-light {
  background-color: #eeeded;
}
</style>
